<template>
<h1> 发微博页面 </h1>
  <div style="width: 500px;margin: 0 auto;">
    <el-input v-model:="weibo.content" placeholder="微博正文"></el-input>

    <el-upload
        v-model:file-list="fileList"
        action="http://localhost:8080/v1/upload"
        name="file"
        limit="9"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <el-button type="primary" @click="post"
               style="width:100px;margin: 10px;font-weight: bold">发布</el-button>
  </div>
</template>


<script setup>

import {ref} from "vue";
import router from "@/router";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'

const weibo = ref({content:''})
const post = () => {
  let user = getUser();
  if (user == null){
    alert('请先登录');
    router.push("/login")
    return;
  }

  //判断是否上传图片
  if(fileList.value.length > 0){//用户传图片了
    let  imgUrls = [];
    for (let file of fileList.value) {
      let imgUrl = file.response.data;
      imgUrls.push(imgUrl);
    }
    weibo.value.imgUrls = imgUrls.toString();
  }


  //给微博对象设置作者id JS数
  weibo.value.userId = user.id;
  let data = qs.stringify(weibo.value);
  console.log(data)

  //给后端发送请求
  axios.post("http://localhost:8080/v1/weibos/add-new", data).
  then(response => {
    if (response.data.code == 2002){
      ElMessage.success('发布成功');
      router.push("/")
    }
  })
}


const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)


const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  let imgUrl = uploadFile.response.data;
  axios.post('http://localhost:8080/v1/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code == 2002){
          console.log(imgUrl)
          ElMessage.success('删除成功')
        }
      })
}

</script>




<style scoped>

</style>